<template>
    <el-card v-for="form in AllData" :key="form.type" class="box-card">
        <div slot="header" class="clearfix">
            <!-- Icon 图标：提供了一套常用的图标集合。直接通过设置类名为 el-icon-iconName 来使用即可。 -->
            <i class="el-icon-s-order" style="color: #0a76a4;margin-right: 1%" />
            <span>{{form.type}}</span>
            <el-button style="float: right; padding: 3px 0"  @click="handler(form)">操作按钮</el-button>
        </div>
        <div class="text item">
            <!-- Descriptions 描述列表，列表形式展示多个字段。 -->
            <el-descriptions :column="1">
                <template v-for="(col, index) in form.details">
                    <el-descriptions-item
                        v-if="col.display"
                        :key="index"
                        :label="col.label"
                        :span="col.span"
                    >{{ col.value }}
                    </el-descriptions-item>
                </template></el-descriptions></div>
    </el-card>
</template>

<script>
export default {
    name: "CardView",
    data() {
        return {
            AllData: [

            ],
            currentData:[]
        }
    },
    methods: {
        handler(item) {
            this.$message('操作')
            //console.log(item)
        }
    },
    mounted(){
        console.log('cardview mounted')
    }
}
</script>

<style scoped>
.box-card {
    width: 100%;
    margin-bottom: 2%;
    border-radius: 3%;
}
.text {
    font-size: 10%;
    margin: 3%;
}
.item {
    margin-bottom: 4%;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>